<template>
  <a-modal
    centered
    width="60%"
    :open="props.open"
    :footer="null"
    :maskClosable="false"
    :closable="false"
  >
    <div class="model-content">
      <div class="step flex">
        <div class="flex" :class="current >= 1 ? 'active' : ''">
          <span>1</span>
          <p>认证企业</p>
          <a-image
            :style="{ width: '20px' }"
            :preview="false"
            src="/image/arrow.png"
          ></a-image>
        </div>
        <div class="flex" :class="current >= 2 ? 'active' : ''">
          <span>2</span>
          <p>个人身份认证</p>
          <a-image
            :style="{ width: '20px' }"
            :preview="false"
            src="/image/arrow.png"
          ></a-image>
        </div>
        <div class="flex" :class="current >= 3 ? 'active' : ''">
          <span>3</span>
          <p>店铺信息</p>
          <a-image
            :style="{ width: '20px' }"
            :preview="false"
            src="/image/arrow.png"
          ></a-image>
        </div>
        <div class="flex" :class="current >= 4 ? 'active' : ''">
          <span>4</span>
          <p>注册完成</p>
          <a-image
            :style="{ width: '20px' }"
            :preview="false"
            src="/image/arrow.png"
          ></a-image>
        </div>
      </div>
      <stepOne v-if="current === 1" @handleSubmit="handleSubmit" />
      <stepTwo v-else-if="current === 2" @handleSubmit="handleSubmit" />
      <stepThree v-else-if="current === 3" :formData="formData" @handleSubmit="handleSubmit" />
      <stepEnd v-else-if="current === 4" @handleReback="handleReback" />
    </div>
  </a-modal>
  <modal
    :show="show"
    :title="title"
    :current="current"
    :formData="formData"
    @changeCurrentState="changeCurrentState"
    @closeModal="closeModal"
  />
</template>
<script setup>
import { ref } from "vue";
import stepOne from "./components/step-one.vue";
import stepTwo from "./components/step-two.vue";
import stepThree from "./components/step-three.vue";
import stepEnd from "./components/step-end.vue";
import modal from "./components/modal.vue";
const props = defineProps(["open"]);
const current = ref(1);
const show = ref(false);
const title = ref("");
const formData = ref(null);
const image = ref('')
const handleSubmit = (val, data) => {
  switch (val) {
    case 1:
      formData.value = data;
      image.value = data.url
      console.log(data)
      show.value = true;
      title.value = "营业执照验证信息";
      break;
    case 2:
      formData.value = {
        idCardCopy: data.idCardCopy.imgUrl,
        name: data.idCardCopy.name,
        cardNumber: data.idCardCopy.cardNumber,
        idCardNational: data.idCardNational ? data.idCardNational.imgUrl : null,
        endTime: data.idCardNational ? data.idCardNational.endTime : null,
        image: image.value,
      };
      show.value = true;
      title.value = "个人验证信息";
      break;
    case 3:
      show.value = true;
      title.value = "商家服务协议";
      break;
    case 4:
      return;
      break;
    default:
      break;
  }
};
const emits = defineEmits("closeModal");
const handleReback = () => {
  current.value = 1;
  emits("closeModal", false);
};
const changeCurrentState = (val) => {
  current.value = val;
  show.value = false;
};
const closeModal = () => {
  show.value = false;
};
</script>
<style lang="less">
@import url("./register.less");
</style>
